<template>
  <div class="main-container">
    <n-card content-style="padding: 0;"  title="目标设置">
      <template #header-extra>
        <n-switch v-model:value="goalSwitchValue">
          <template #checked>
            展示
          </template>
          <template #unchecked>
            隐藏
          </template>
        </n-switch>
      </template>
      <div v-show="!goalSwitchValue">
        <n-tabs
            type="line"
            size="large"
            :tabs-padding="20"
            pane-style="padding: 20px;"
            v-model:value="goalTab"
        >
          <n-tab-pane name="目标列表">
            <GoalPanel></GoalPanel>
          </n-tab-pane>
          <n-tab-pane name="目标信息">
            <GoalList></GoalList>
          </n-tab-pane>
          <n-tab-pane name="目标日历">
            <GoalYearDuration></GoalYearDuration>
          </n-tab-pane>
<!--          <n-tab-pane name="目标统计">-->
<!--            <GoalTimeStat></GoalTimeStat>-->
<!--          </n-tab-pane>-->
        </n-tabs>
      </div>
    </n-card>
    <n-card content-style="padding: 0;" title="领域设置">
      <template #header-extra>
        <n-switch v-model:value="fieldSwitchValue">
          <template #checked>
            展示
          </template>
          <template #unchecked>
            隐藏
          </template>
        </n-switch>
      </template>
      <div v-show="!fieldSwitchValue">
        <n-tabs
            type="line"
            size="large"
            :tabs-padding="20"
            pane-style="padding: 20px;"
            v-model:value="fieldTab"
        >
          <n-tab-pane name="领域列表">
            <FieldSubPanel></FieldSubPanel>
          </n-tab-pane>
          <n-tab-pane name="思维导图">
            <FieldMindMap></FieldMindMap>
          </n-tab-pane>
          <n-tab-pane name="阶段日历">
            <StageYearDuration></StageYearDuration>
          </n-tab-pane>
<!--          <n-tab-pane name="领域统计">-->
<!--            <FieldTimeStat></FieldTimeStat>-->
<!--          </n-tab-pane>-->
<!--          <n-tab-pane name="阶段统计">-->
<!--            <StageTimeStat></StageTimeStat>-->
<!--          </n-tab-pane>-->
        </n-tabs>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import LifeModeList from "@/views/lifeMode/lifeModeList/LifeModeList.vue";
import LifeModeItems from "@/views/lifeMode/lifeModeList/LifeModeItems.vue";
import {computed, onBeforeMount, ref, watch} from 'vue'
import useVisitedRouteStore from "@/store/modules/visited-routes";
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";
import GoalPanel from "@/views/field/goal/GoalPanel.vue";
import FieldSubPanel from "@/views/field/field/FieldSubPanel.vue";
import TaskList from "@/views/task/TaskList.vue";
import GoalYearDuration from "@/views/field/statpanel/GoalYearDuration.vue";
import StageYearDuration from "@/views/field/statpanel/StageYearDuration.vue";
import FieldMindMap from "@/views/field/statpanel/FieldMindMap.vue";
import FieldTimeStat from "@/views/field/statpanel/FieldTimeStat.vue";
import StageTimeStat from "@/views/field/statpanel/StageTimeStat.vue";
import GoalTimeStat from "@/views/field/statpanel/GoalTimeStat.vue";
import GoalList from "@/views/field/goal/GoalList.vue";

const fieldSwitchValue = ref(false)
const goalSwitchValue = ref(false)
const fieldTab = ref("领域列表")
const fieldkeys = ref([Date.now(),Date.now(),Date.now(),Date.now()])
watch(fieldTab,()=>{
  if(fieldTab.value === "思维导图") {
    fieldkeys.value[1] = Date.now()
  }
  if(fieldTab.value === "领域统计") {
    fieldkeys.value[2] = Date.now()
  }
  if(fieldTab.value === "阶段统计") {
    fieldkeys.value[3] = Date.now()
  }
})

const goalTab = ref("目标列表")
const goalkeys = ref([Date.now(),Date.now(),Date.now(),Date.now()])
watch(fieldTab,()=>{
  if(goalTab.value === "目标日历") {
    goalkeys.value[1] = Date.now()
  }
  if(goalTab.value === "阶段日历") {
    goalkeys.value[2] = Date.now()
  }
  if(goalTab.value === "目标统计") {
    goalkeys.value[3] = Date.now()
  }
})
</script>


<style scoped>
.n-text {
  font-size: 18px;
}
</style>